<template>
  <div class="popup-box__wrap"
       v-if="visible"
       ref="box"
  >
    <div class="popup-box">
      <div class="header">
        <p>{{title}}</p>
        <yun-icon name="close1"size="12px" color="#999" @click.native="handleClose"></yun-icon>
      </div>
      <div class="box-body">
        <div class="box-body__top" v-if="name">
          <yun-avatar size="18px" :src="avatar"></yun-avatar>
          <p>{{name}}<span>:</span>{{content}}</p>
        </div>

        <slot></slot>
        <textarea  v-model="inputValue" name="" placeholder="Write Here" class="box-body__bottom" cols="30" rows="10"></textarea>
      </div>
      <div class="footer">
        <div class="type"  v-if="name"><span>公开</span><yun-icon name="down_arrow" style="margin-left: 8px" size="8px" color="#999"></yun-icon></div>
        <div class="submit" @click="popupSubmit">提交</div>
      </div>

    </div>
  </div>
</template>


<script>
  import config from '../../../../action/config';
  export default {
    name:'popupBox',
    props:{


    },


    data(){
      return{
        title:'popupbox',
        avatar:'',
        name:'aa',
        content:'黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉',
        visible:false,
        inputValue:'',
        onSubmit:null,
        onClose:null,
        canClick:true,
        timer1:null,
      }
    },

    methods:{
      handleClose(){
        this.visible = false;
      },
      popupSubmit(){
        if(this.canClick){
          this.canClick = false;
          clearTimeout(this.timer1);
          this.onSubmit(this.inputValue,this.handleClose);
          this.timer1=setTimeout(()=>{
            this.canClick = true;
          },1000)
        }else{
          this.$message({
            type:'warning',
            message:'不可以频繁操作!'
          })
        }

      },
    },

    watch:{
    }
  }
</script>


<style lang="scss">

  .popup-box__wrap{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index: 8000;
    @extend %flex-row-center;
    background-color: rgba(33,41,44,.4);
    .popup-box{
      border-radius: 4*$length;
      box-sizing:border-box;
      width:620*$length;
      background-color: #fff;
      padding:22*$length 24*$length;
      .header{
        @extend %flex-row-spb;
        p{
          @include fontStyle(14,18,500,#2f2f2f,left);
        }
      }

      .box-body{
        margin-top:24*$length;
        .box-body__top{
          width:572*$length;
          box-sizing:border-box;
          padding:16*$length;
          border-radius: 4*$length;
          background: #F4F8FA;

          @extend %flex-row-spb;
          align-items: flex-start;
          p{
            width:514*$length;
            margin-left:8*$length;
            @include fontStyle(14,22,500,#666,left);
            height:auto;
            span{
               margin:0 5*$length;
            }
          }
        }
        .box-body__bottom{
          margin-top: 24*$length;
          border-radius: 4*$length;
          width:572*$length;
          padding:14*$length 16*$length;
          background: #F4F8FA;
          border:1px solid #EFEFEF;
          @include fontStyle(14,20,500,#999,left);
          height:100*$length;


        }
      }

      .footer{
        margin-top: 32*$length;
        width:572*$length;
        @extend %flex-row-spb;
        justify-content: flex-end;
        .type{
          @extend %cursorPointer;
          @include fontStyle(14,19,500,#999,center);
        }
        .submit{
          @extend %cursorPointer;
          margin-left: 20*$length;
          width:100*$length;
          background-color: #00AAE6;
          border-radius: 4*$length;
          @include fontStyle(14,40,500,#fff,center);
          @extend %animate-transition;
          &:hover{
            filter:brightness(130%);
          }
        }
      }
    }
  }

</style>
